<!-- 账单列表 -->
<template>
    <view class="bill-list">
        <van-tabs v-model:active="activeValue" @change="activeChange">
            <van-tab v-for="index in 3">
                <template #title>
                    <view>{{ index == 1 ? "收益" : index == 2 ? '支出' : '充值' }}</view>
                </template>
                <scroll-view :scroll-top="state.scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
                @scrolltolower="lower">
                <view class="bill-list-main">
                    <view class="bill-list-item" v-for="(item,index) in state.listData" :key="index">
                        <view class="bill-list-item-time">{{ `${item.DateKey.Year}年${item.DateKey.Month}月` }}</view>
                        <view class="bill-list-item-main" v-for="itemBills in item.Bills" :key="item.ID">
                            <view class="bill-list-item-main-left">
                                <view>{{itemBills.ShowText}}</view>
                                <text>{{itemBills.AddTime}}</text>
                            </view>
                            <view class="bill-list-item-main-right">{{itemBills.Money}}金币</view>
                        </view>
                    </view>
                </view>
                <Empty v-if="state.listData.length == 0" title="暂无数据"></Empty>
            </scroll-view>
            </van-tab>
        </van-tabs>
    </view>
</template>
    
<script setup>
import { reactive, getCurrentInstance, ref, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"
import { onLoad } from '@dcloudio/uni-app'

import {
    GroupBill
} from "@/api/person/index.js"

let { proxy } = getCurrentInstance()

const state = reactive({
    show: false,
    curIndex: false,
    formData: {
        billState: 0,
        PageIndex: 1,
        PageSize: 20,
        billType: 0
    },
    scrollTop:0,
    listData:[]
})

let activeValue = ref()

onLoad((options) => {

})

onMounted(() => {
    GroupBillFn()
})

const upper = (e) => {
}
const lower = (e) => {
    state.formData.PageIndex++
    GroupBillFn()
}

const activeChange = () => {
    state.formData.billType = activeValue.value
    state.formData.PageIndex = 1
    GroupBillFn()
}

const GroupBillFn = async () => {
    uni.showLoading({title: '加载中'})
    let data = await proxy.$get(GroupBill,state.formData)
    uni.hideLoading()
    if(data.code == 200){
        state.listData = state.listData.concat(data.data)
    }
}


</script>
    
<style lang="scss" scoped>
:deep(.van-tabs__line) {
    display: none;
}

:deep(.van-tab) {
    background: none;
    padding: 20rpx;
    height: calc(100% - 20rpx);

}

:deep(.van-tabs__nav) {
    margin: 0 30rpx;
    padding: 10rpx;
    background-color: #F7F8F9;
    border-radius: 8rpx;
    box-sizing: content-box;
}

:deep(.van-tab--active) {
    background: #fff;
    border-radius: 8rpx;
}

.bill-list {
    padding-top: 20rpx;
}

.bill-list-main {
    padding: 30rpx;

    .bill-list-item-time {

        background: #F7F8F9;
        font-weight: 500;
        color: #262626;
        font-size: 24rpx;
        height: 56rpx;
        line-height: 56rpx;
        padding: 0 10rpx;
    }

    .bill-list-item-main {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #E7E7E7;

        text {
            font-size: 20rpx;
            color: #999999;
            display: block;
            margin-top: 10rpx;
        }
    }
}
.scroll-Y {
    height: calc(100vh - 200rpx);
}

</style>
    